<template>
  <div class="app-container">
    <!-- 左侧：个人信息 -->
    <div class="left-panel">
      <StudentProfileBox :userProfile="userProfile" v-model:summary="summary" :saving="saving" @save="save" @updateAvatar="handleAvatarUpdate">
        <!-- 通过具名插槽自定义教师信息显示 -->
        <template #teacher-info="{ userProfile }">
          <div class="info-item">
            <div class="label">工号</div>
            <div class="value">{{ userProfile?.teacher?.teachId }}</div>
          </div>
          <div class="info-item">
            <div class="label">学院</div>
            <div class="value">{{ userProfile?.dept?.deptName }}</div>
          </div>
          <div class="info-item">
            <div class="label">专业方向</div>
            <div class="value">{{ userProfile?.teacher?.majorField }}</div>
          </div>
        </template>
      </StudentProfileBox>
    </div>

    <!-- 右侧：志愿分组信息 -->
    <div class="right-panel">
      <TeacherVolunteerBox :teacherId="userProfile?.teacher?.teacherId" />
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { getUserProfile } from '@/api/system/user'
import StudentProfileBox from './components/ProfileBox.vue'
import TeacherVolunteerBox from './components/TeacherVolunteerBox.vue'
import { updateTeacherInfo } from '@/api/teacher'

const { proxy } = getCurrentInstance()

const userProfile = ref({})
const summary = ref('')
const saving = ref(false)

const getUserInfo = () => {
  getUserProfile().then((res) => {
    // 与学生页保持一致的数据结构处理
    userProfile.value = res.data?.data || {}
    summary.value = userProfile.value?.teacher?.summary || ''
  })
}

const save = async () => {
  const userId = userProfile.value?.userId
  const teacherId = userProfile.value?.teacher?.teacherId
  if (!userId) return
  try {
    saving.value = true

    await updateTeacherInfo({ userId, teacherId, email: userProfile.value.email, phonenumber: userProfile.value.phonenumber, summary: summary.value })
    proxy.$modal?.msgSuccess?.('信息已保存')
    getUserInfo()
  } catch (e) {
    proxy.$modal?.msgError?.('保存失败，请稍后重试')
  } finally {
    saving.value = false
  }
}

const handleAvatarUpdate = () => {
  getUserInfo()
}

onMounted(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped>
$full-height: calc(100dvh - 84px);
$gap: 16px;

.app-container {
  display: flex;
  gap: $gap;
  height: $full-height;
  padding: $gap;
  overflow: hidden;
}

.left-panel {
  flex: 0 0 30%;
  min-width: 360px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0; // 防止flex子元素溢出
}

// 响应式适配
@media (max-width: 1200px) {
  .left-panel {
    flex: 0 0 35%;
    min-width: 320px;
  }
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }

  .left-panel {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
  }

  .right-panel {
    flex: 1;
  }
}
</style>
